<template>
  <a-layout class="baselayout">
    <a-layout-sider width="256" theme="light" v-model:collapsed="collapsed">
      <div class="logo">抽奖管理系统</div>
      <a-menu mode="inline" :selected-keys="[currentRoute]">
        <a-menu-item key="/admin/draw" @click="navigate('/admin/draw')">
          <setting-outlined />
          <span>活动设置</span>
        </a-menu-item>
        <a-menu-item key="/admin/prize" @click="navigate('/admin/prize')">
          <gift-outlined />
          <span>奖品管理</span>
        </a-menu-item>
        <a-menu-item key="/admin/user" @click="navigate('/admin/user')">
          <user-outlined />
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item key="/admin/records" @click="navigate('/admin/records')">
          <ordered-list-outlined />
          <span>抽奖记录</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <a-button @click="collapsed = !collapsed" class="trigger">
          <menu-fold-outlined v-if="!collapsed" />
          <menu-unfold-outlined v-else />
        </a-button>
        <div class="header-title">大屏抽奖管理系统</div>
        <div class="action">
          <a-button type="primary" @click="navigate('/draw')"
            >进入抽奖界面</a-button
          >
        </div>
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  GiftOutlined,
  UserOutlined,
  OrderedListOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "BaseLayout",
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    GiftOutlined,
    UserOutlined,
    OrderedListOutlined,
    SettingOutlined,
  },
  setup() {
    const router = useRouter();
    const collapsed = ref(false);

    const currentRoute = computed(() => router.currentRoute.value.path);

    const navigate = (path) => {
      router.push(path);
    };

    return {
      collapsed,
      currentRoute,
      navigate,
    };
  },
};
</script>

<style scoped>
.baselayout {
  min-height: 100vh;
}

.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #1890ff;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
  color: #1890ff;
}

.content {
  margin: 24px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
}
</style>
